Túl az Enumokon: TypeScript Const Assertions vs. Union Types

A statikusan típusos JavaScript világában, a TypeScript segítségével, az enumok régóta a legkézenfekvőbb megoldást jelentik a rögzített, névvel ellátott konstansok ábrázolására. Világos és olvasható módot kínálnak a kapcsolódó értékek gyűjteményének meghatározására. Ahogy azonban a projektek növekednek és fejlődnek, a fejlesztők gyakran keresnek rugalmasabb és néha hatékonyabb alternatívákat. Két erős versenyző, amely gyakran felmerül, a const assertions és az union types. Ez a bejegyzés azzal foglalkozik, hogy hogyan használhatjuk ezeket az alternatívákat a hagyományos enumok helyett, gyakorlati példákkal szolgálva, és útmutatást nyújtva abban, hogy mikor melyiket válasszuk.

A Hagyományos TypeScript Enumok Értelmezése

Mielőtt felfedeznénk az alternatívákat, elengedhetetlen, hogy szilárdan megértsük, hogyan működnek a standard TypeScript enumok. Az enumok lehetővé teszik, hogy névvel ellátott numerikus vagy string konstansok halmazát definiáljuk. Lehetnek numerikusak (az alapértelmezett) vagy string alapúak.

Numerikus Enumok

Alapértelmezés szerint az enum tagokhoz 0-tól kezdődő numerikus értékek vannak hozzárendelve.

            enum DirectionNumeric {
  Up,
  Down,
  Left,
  Right
}

let myDirection: DirectionNumeric = DirectionNumeric.Up;
console.log(myDirection); // Output: 0

            

              
                Copy
              
            
          

Explicit módon is hozzárendelhet numerikus értékeket.

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  InternalError = 500
}

let responseStatus: StatusCode = StatusCode.Success;
console.log(responseStatus); // Output: 200

            

              
                Copy
              
            
          

String Enumok

A string enumokat gyakran előnyben részesítik a jobb hibakeresési élmény miatt, mivel a tagok nevei megmaradnak a lefordított JavaScriptben.

            enum ColorString {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

let favoriteColor: ColorString = ColorString.Blue;
console.log(favoriteColor); // Output: "BLUE"

            

              
                Copy
              
            
          

Az Enumok Terhelése

Bár az enumok kényelmesek, némi többletterheléssel járnak. A JavaScriptre fordításkor a TypeScript enumok olyan objektumokká alakulnak, amelyek gyakran tartalmaznak fordított leképezéseket (pl. a numerikus érték visszavetítése az enum nevére). Ez hasznos lehet, de hozzájárul a csomag méretéhez, és nem mindig szükséges.

Tekintsük ezt az egyszerű string enumot:

            enum Status {
  Pending = "PENDING",
  Processing = "PROCESSING",
  Completed = "COMPLETED"
}

            

              
                Copy
              
            
          

A JavaScriptben ez valami ilyesmi lehet:

            var Status;
(function (Status) {
    Status["Pending"] = "PENDING";
    Status["Processing"] = "PROCESSING";
    Status["Completed"] = "COMPLETED";
})(Status || (Status = {}));

            

              
                Copy
              
            
          

Egyszerű, csak olvasható konstansok esetén ez a generált kód egy kicsit túlzásnak tűnhet.

1. Alternatíva: Const Assertions

Const Assertions Tömbökkel

Létrehozhat egy string literálokból álló tömböt, majd használhat egy const assertiont, hogy a típusát megváltoztathatatlanná tegye, és az elemeit literális típusokká.

            const statusArray = ["PENDING", "PROCESSING", "COMPLETED"] as const;

type StatusType = typeof statusArray[number];

let currentStatus: StatusType = "PROCESSING";
// currentStatus = "FAILED"; // Error: Type '"FAILED"' is not assignable to type 'StatusType'.

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus("COMPLETED");

            

              
                Copy
              
            
          

Bontsuk le, mi történik itt:

• as const: Ez az állítás azt mondja a TypeScriptnek, hogy a tömböt csak olvashatóként kezelje, és az elemeihez a legspecifikusabb literális típusokat következtessen ki. Tehát a string[] helyett a típus readonly ["PENDING", "PROCESSING", "COMPLETED"] lesz.
• typeof statusArray[number]: Ez egy leképezett típus. Végigmegy a statusArray összes indexén, és kinyeri a literális típusaikat. A number index szignatúra lényegében azt mondja, hogy "add meg nekem a tömb bármely elemének típusát". Az eredmény egy union típus: "PENDING" | "PROCESSING" | "COMPLETED".

Ez a megközelítés a string enumokhoz hasonló típusbiztonságot nyújt, de minimális JavaScriptet generál. A statusArray maga is stringek tömbje marad a JavaScriptben.

Const Assertions Objektumokkal

            const userRoles = {
  Admin: "ADMIN",
  Editor: "EDITOR",
  Viewer: "VIEWER"
} as const;

type UserRole = typeof userRoles[keyof typeof userRoles];

let currentUserRole: UserRole = "EDITOR";
// currentUserRole = "GUEST"; // Error: Type '"GUEST"' is not assignable to type 'UserRole'.

function displayRole(role: UserRole) {
  console.log(`User role is: ${role}`);
}

displayRole(userRoles.Admin); // Valid
displayRole("EDITOR"); // Valid

            

              
                Copy
              
            
          

Ebben az objektum példában:

• as const: Ez az állítás az egész objektumot csak olvashatóvá teszi. Ennél is fontosabb, hogy literális típusokat következtet ki az összes tulajdonság értékére (pl. "ADMIN" a string helyett), és magukat a tulajdonságokat is csak olvashatóvá teszi.
• keyof typeof userRoles: Ez a kifejezés a userRoles objektum kulcsainak unióját eredményezi, ami "Admin" | "Editor" | "Viewer".
• typeof userRoles[keyof typeof userRoles]: Ez egy lookup típus. Veszi a kulcsok unióját, és felhasználja a megfelelő értékek kikeresésére a userRoles típusban. Ez az értékek unióját eredményezi: "ADMIN" | "EDITOR" | "VIEWER", ami a szerepek kívánt típusa.

A userRoles JavaScript kimenete egy egyszerű JavaScript objektum lesz:

            var userRoles = {
    Admin: "ADMIN",
    Editor: "EDITOR",
    Viewer: "VIEWER"
};

            

              
                Copy
              
            
          

Ez lényegesen könnyebb, mint egy tipikus enum.

Mikor Használjunk Const Assertions-t?

• Csak olvasható konstansok: Ha string vagy szám literálok rögzített halmazára van szüksége, amelyek futásidőben nem változhatnak.
• Minimális JavaScript kimenet: Ha aggódik a csomag mérete miatt, és a leginkább teljesítő futásidejű reprezentációt szeretné a konstansaihoz.
• Objektumszerű szerkezet: Ha jobban szereti a kulcs-érték párok olvashatóságát, hasonlóan ahhoz, ahogyan az adatokat vagy a konfigurációt strukturálná.
• String alapú halmazok: Különösen hasznos állapotok, típusok vagy kategóriák ábrázolására, amelyeket a legjobban leíró stringek azonosítanak.

2. Alternatíva: Union Types

Az union types lehetővé teszik, hogy deklaráljuk, hogy egy változó több típus egyikének értékét tárolhatja. Ha literális típusokkal (string, szám, boolean literálokkal) kombináljuk, akkor hatékony módot képeznek az engedélyezett értékek halmazának meghatározására anélkül, hogy explicit konstans deklarációra lenne szükség a halmazhoz.

Union Types String Literálokkal

Közvetlenül definiálhat egy string literálokból álló uniót.

            type TrafficLightColor = "RED" | "YELLOW" | "GREEN";

let currentLight: TrafficLightColor = "YELLOW";
// currentLight = "BLUE"; // Error: Type '"BLUE"' is not assignable to type 'TrafficLightColor'.

function changeLight(color: TrafficLightColor) {
  console.log(`Changing light to: ${color}`);
}

changeLight("RED");
// changeLight("REDDY"); // Error

            

              
                Copy
              
            
          

Ez a legközvetlenebb és gyakran a leg Concise módja az engedélyezett string értékek halmazának meghatározására.

Union Types Numerikus Literálokkal

Hasonlóképpen, használhat numerikus literálokat.

            type HttpStatusCode = 200 | 400 | 404 | 500;

let responseCode: HttpStatusCode = 404;
// responseCode = 201; // Error: Type '201' is not assignable to type 'HttpStatusCode'.

function handleResponse(code: HttpStatusCode) {
  if (code === 200) {
    console.log("Success!");
  } else {
    console.log(`Error code: ${code}`);
  }
}

handleResponse(500);

            

              
                Copy
              
            
          

Mikor Használjunk Union Types-t?

• Egyszerű, közvetlen halmazok: Ha az engedélyezett értékek halmaza kicsi, világos, és nem igényel leíró kulcsokat magukon az értékeken túl.
• Implicit konstansok: Ha nincs szüksége névvel ellátott konstansra magához a halmazhoz, hanem közvetlenül a literális értékeket használja.
• Maximális tömörség: Azokban az egyszerű esetekben, amikor egy dedikált objektum vagy tömb definiálása túlzásnak tűnik.
• Függvényparaméterek/visszatérési típusok: Kiváló a függvények elfogadható string vagy szám bemeneteinek/kimeneteinek pontos halmazának meghatározásához.

Enumok, Const Assertions és Union Types Összehasonlítása

Foglaljuk össze a legfontosabb különbségeket és felhasználási eseteket:

Futásidejű Viselkedés

• Enumok: JavaScript objektumokat generálnak, potenciálisan fordított leképezésekkel.
• Const Assertions (Tömbök/Objektumok): Egyszerű JavaScript tömböket vagy objektumokat generálnak. A típusinformációk futásidőben törlődnek, de az adatszerkezet megmarad.
• Union Types (literálokkal): Nincs futásidejű reprezentáció magának az uniónak. Az értékek csak literálok. A típusellenőrzés tisztán fordítási időben történik.

Olvashatóság és Kifejezőerő

• Enumok: Magas olvashatóság, különösen leíró nevekkel. Lehet bőbeszédűbb.
• Const Assertions (Objektumok): Jó olvashatóság kulcs-érték párokkal, konfigurációkat vagy beállításokat utánozva.
• Const Assertions (Tömbök): Kevésbé olvasható névvel ellátott konstansok ábrázolására, inkább csak értékek rendezett listájára.
• Union Types: Nagyon tömör. Az olvashatóság maguknak a literális értékeknek a világosságától függ.

Típusbiztonság

• Mindhárom megközelítés erős típusbiztonságot kínál. Biztosítják, hogy csak érvényes, előre definiált értékek rendelhetők hozzá változókhoz, vagy adhatók át függvényeknek.

Csomag Mérete

• Enumok: Általában a legnagyobbak a generált JavaScript objektumok miatt.
• Const Assertions: Kisebbek, mint az enumok, mivel egyszerű adatszerkezeteket hoznak létre.
• Union Types: A legkisebbek, mivel nem generálnak specifikus futásidejű adatszerkezetet magához a típushoz, csak a literális értékekre támaszkodnak.

Felhasználási Esetek Mátrixa

Íme egy rövid útmutató:

Gyakorlati Példák és Bevált Gyakorlatok

1. Példa: API Státuszkódok Ábrázolása

Enum:

            enum ApiStatus {
  Success = "SUCCESS",
  Error = "ERROR",
  Pending = "PENDING"
}

function handleApiResponse(status: ApiStatus) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Const Assertion (Objektum):

            
const apiStatusCodes = {
  SUCCESS: "SUCCESS",
  ERROR: "ERROR",
  PENDING: "PENDING"
} as const;

type ApiStatus = typeof apiStatusCodes[keyof typeof apiStatusCodes];

function handleApiResponse(status: ApiStatus) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Union Type:

            
type ApiStatus = "SUCCESS" | "ERROR" | "PENDING";

function handleApiResponse(status: ApiStatus) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Ajánlás: Ebben a forgatókönyvben a union type gyakran a leg Concise és leghatékonyabb. A literális értékek önmagukban is elég leíróak. Ha további metaadatokat kellene társítania az egyes állapotokhoz (pl. felhasználóbarát üzenet), akkor egy const assertion objektum lenne jobb választás.

2. Példa: Felhasználói Szerepkörök Definíciója

Enum:

            
enum UserRoleEnum {
  Admin = "ADMIN",
  Moderator = "MODERATOR",
  User = "USER"
}

function getUserPermissions(role: UserRoleEnum) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Const Assertion (Objektum):

            
const userRolesObject = {
  Admin: "ADMIN",
  Moderator: "MODERATOR",
  User: "USER"
} as const;

type UserRole = typeof userRolesObject[keyof typeof userRolesObject];

function getUserPermissions(role: UserRole) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Union Type:

            
type UserRole = "ADMIN" | "MODERATOR" | "USER";

function getUserPermissions(role: UserRole) {
  // ... logika ...
}

            

              
                Copy
              
            
          

Ajánlás: A const assertion objektum jó egyensúlyt teremt itt. Világos kulcs-érték párokat biztosít (pl. userRolesObject.Admin), ami javíthatja az olvashatóságot a szerepkörökre való hivatkozáskor, miközben továbbra is hatékony. A union type szintén nagyon erős versenyző, ha a közvetlen string literálok elegendőek.

3. Példa: Konfigurációs Beállítások Ábrázolása

Képzeljen el egy konfigurációs objektumot egy globális alkalmazáshoz, amelynek különböző témái lehetnek.

Enum:

            
enum Theme {
  Light = "light",
  Dark = "dark",
  System = "system"
}

interface AppConfig {
  theme: Theme;
  // ... egyéb konfigurációs beállítások ...
}

            

              
                Copy
              
            
          

Const Assertion (Objektum):

            
const themes = {
  Light: "light",
  Dark: "dark",
  System: "system"
} as const;

type Theme = typeof themes[keyof typeof themes];

interface AppConfig {
  theme: Theme;
  // ... egyéb konfigurációs beállítások ...
}

            

              
                Copy
              
            
          

Union Type:

            
type Theme = "light" | "dark" | "system";

interface AppConfig {
  theme: Theme;
  // ... egyéb konfigurációs beállítások ...
}

            

              
                Copy
              
            
          

Ajánlás: Az olyan konfigurációs beállításokhoz, mint a témák, a const assertion objektum gyakran ideális. Világosan meghatározza a rendelkezésre álló opciókat és a hozzájuk tartozó string értékeket. A kulcsok (Light, Dark, System) leíróak és közvetlenül az értékekhez vannak hozzárendelve, ami a konfigurációs kódot nagyon érthetővé teszi.

A Megfelelő Eszköz Kiválasztása a Munkához

• Válassza a Union Types-t, ha egy egyszerű, korlátozott string vagy szám literál halmazra van szüksége, és maximális tömörségre van szükség. Kiválóak a függvényszignatúrákhoz és az alapvető érték korlátozásokhoz.
• Válassza a Const Assertions (Objektumokkal)-t, ha strukturáltabb, olvashatóbb módon szeretne névvel ellátott konstansokat definiálni, hasonlóan egy enumhoz, de lényegesen kevesebb futásidejű többletterheléssel. Ez nagyszerű a konfigurációhoz, a szerepkörökhöz vagy bármely olyan halmazhoz, ahol a kulcsok jelentős jelentéssel bírnak.
• Válassza a Const Assertions (Tömbökkel)-t, ha egyszerűen az értékek megváltoztathatatlan, rendezett listájára van szüksége, és az indexen keresztüli közvetlen hozzáférés fontosabb, mint a névvel ellátott kulcsok.
• Vegye figyelembe a TypeScript Enumokat, ha szüksége van a specifikus funkcióikra, például a fordított leképezésre (bár ez kevésbé gyakori a modern fejlesztésben), vagy ha a csapata erősen preferálja, és a teljesítményre gyakorolt hatás elhanyagolható a projektje számára.

Sok modern TypeScript projektben a const assertions és a union types felé hajlanak a hagyományos enumok helyett, különösen a string alapú konstansok esetében, a jobb teljesítményjellemzőik és a gyakran egyszerűbb JavaScript kimenetük miatt.

Globális Szempontok

Amikor alkalmazásokat fejlesztünk egy globális közönség számára, a következetes és kiszámítható konstans definíciók kulcsfontosságúak. Az általunk tárgyalt választások (enumok, const assertions, union types) mind hozzájárulnak ehhez a következetességhez azáltal, hogy kikényszerítik a típusbiztonságot a különböző környezetekben és fejlesztői területeken.

• Következetesség: A választott módszertől függetlenül a kulcs a következetesség a projekten belül. Ha úgy dönt, hogy const assertion objektumokat használ a szerepkörökhöz, tartsa be ezt a mintát a teljes kódbázisban.
• Nemzetköziesítés (i18n): Amikor olyan címkéket vagy üzeneteket definiál, amelyeket nemzetköziesíteni kell, használja ezeket a típusbiztos struktúrákat annak biztosítására, hogy csak érvényes kulcsok vagy azonosítók kerüljenek felhasználásra. A tényleges lefordított stringeket külön kezelik az i18n könyvtárak segítségével. Például, ha van egy status mezője, amely lehet "PENDING", "PROCESSING", "COMPLETED", az i18n könyvtára ezeket a belső azonosítókat a honosított megjelenítési szövegre képezné le.
• Időzónák és Pénznemek: Bár nem kapcsolódnak közvetlenül az enumokhoz, ne feledje, hogy amikor olyan értékekkel foglalkozik, mint a dátumok, időpontok vagy pénznemek, a TypeScript típusrendszere segíthet a helyes használat kikényszerítésében, de a pontos globális kezeléshez általában külső könyvtárakra van szükség. Például egy Currency union type definiálható "USD" | "EUR" | "GBP"-ként, de a tényleges átváltási logika speciális eszközöket igényel.

Következtetés

Ezeknek az alternatíváknak az elfogadása kisebb csomagméretekhez, gyorsabb alkalmazásokhoz és kiszámíthatóbb fejlesztői élményhez vezethet a nemzetközi csapata számára.